<!--
  @author duanzuocai
  @功能说明：多边型地图
    需要父页面提供
        1、接收数据方法：submitMap(mapData)
        2、初始化参数-经纬度：mapArgs.point.longitude,latitude
        3、初始化参数-多边型数据，用于回显（百度生成的）：mapArgs.pointData
  @since 2018/11/01 13:18
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            height: 100%;
            width: 100%;
        }

        #control {
            width: 100%;
            position: absolute;
            bottom: 2em;
            padding-left: 2em;
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=otGlzpt0684vtqNg4XNF6qvj"></script>
    <title>设置线、面可编辑</title>
</head>
<body style="position: relative; overflow: hidden;">
<div id="allmap"></div>
<div id="control">
    <button onclick="BaiduMap.polygon.enableEditing();">开启面编辑功能</button>
    <button onclick="BaiduMap.polygon.disableEditing();">关闭面编辑功能</button>
    <button onclick="BaiduMap.reset();">重置</button>
    <button onclick="BaiduMap.submitData();">完成</button>
</div>
</body>
</html>
<script type="text/javascript">
    document.domain = "xiujiadian.com";
    var BaiduMap = {
        polygon: null,
        point: null,
        map: null,
        initLng: 0,
        initLat: 0,
        createBaiduMap: function () {
            // 百度地图API功能1
            var map = new BMap.Map("allmap", {enableMapClick: false});
            map.centerAndZoom(this.point, 15);
            map.enableScrollWheelZoom();

            //增加多边形
            map.addOverlay(this.polygon);
            this.map = map;
        },
        submitData: function () {
            // 父页面接收数据ID: baiduMapDataId
            window.parent.submitMap(BaiduMap.polygon.getPath());
        },
        reset: function () {
            this.initPolygon();
            this.createBaiduMap();
        },
        initMap: function () {
            var lng = parseFloat(window.parent.mapArgs.point.longitude);
            var lat = parseFloat(window.parent.mapArgs.point.latitude);

            console.log("polygonMap-init-lng: " + lng + ", lat:" + lat);

            this.initLng = lng;
            this.initLat = lat;

            var point = new BMap.Point(lng, lat);
            this.point = point;
        },
        /**
         * 根据网点初始化一个小范围
         * 需要父页面提供参数对象：{cityName, longitude, latitude}
         */
        initPolygon: function () {
            // 创建多边形
            var polygon2 = new BMap.Polygon([
                new BMap.Point(this.initLng + 0.015, this.initLat + 0.015),
                new BMap.Point(this.initLng + 0.015, this.initLat - 0.015),
                new BMap.Point(this.initLng - 0.015, this.initLat - 0.015),
                new BMap.Point(this.initLng - 0.015, this.initLat + 0.015)
            ], {
                strokeColor: "#000",
                strokeWeight: 2,
                strokeOpacity: 0.5,
                enableClicking: false,
                enableMassClear: false
            });
            this.polygon = polygon2;
        }
    };

    BaiduMap.initMap();

    /**
     * 根据父页面参数判断是否要初始化一个小框还是根据原有的数据回显
     * @type {mapArgs.pointData|{}}
     */
    var mapArgs2 = window.parent.mapArgs.pointData;

    try {
        if (mapArgs2) {
            var maps = JSON.parse(mapArgs2);
            var bmap3 = [];
            for (var i = 0; i < maps.length; i++) {
                var map = maps[i];
                bmap3.push(new BMap.Point(map.lng, map.lat));
            }

            var polygon3 = new BMap.Polygon(bmap3, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5});
            BaiduMap.polygon = polygon3;
        } else {
            BaiduMap.initPolygon();
        }
    } catch (e) {
        BaiduMap.initPolygon();
    }

    BaiduMap.createBaiduMap();
</script>
</html>